<style>
</style>

<template>
  <div class="manage-wrap">
    <div class="operation-panel">
      <Row>
        <Col span="24">
          <Poptip width="400" title="搜索" placement="bottom-end" class="float-r">
            <Button type="primary" size="large" icon="ios-search">搜 索</Button>
            <div style="text-align:center" slot="content">
              <Form
                ref="searchForm"
                :model="searchForm"
                :label-width="80"
                value="true"
                style="min-width:200px;padding-top:20px;border-top:1px solid #a3adba;border-bottom:1px solid #a3adba;"
              >
                <Row>
                  <Form-item label="bean名称">
                    <Input v-model="searchForm.beanName"></Input>
                  </Form-item>
                </Row>
              </Form>
              <Row>
                <Button
                  style="margin-left:5px;margin-top:10px;float:right;background-color: #5bc0de;color:#fff"
                  size="small"
                  @click="doSearchTableList"
                >确定</Button>
                <Button style="float:right;margin-top:10px;" size="small" @click="resetSearch">重置</Button>
              </Row>
            </div>
          </Poptip>
          <Button
            class="float-r"
            size="large"
            icon="md-add"
            @click="addSchedule"
            style="margin-right:10px;"
          >添加</Button>
        </Col>
      </Row>
    </div>

    <!--table-->
    <Row>
      <Table stripe size="small" :columns="tableColums" :data="tableData" :loading="tableLoading"></Table>
    </Row>
    <Row>
      <Page
        :total="total"
        :page-size="currentPageSize"
        :current="currentPage"
        @on-change="changeCurrentPage"
        @on-page-size-change="changePageSize"
        show-total
        show-sizer
        style="float:right;margin-top:10px"
      ></Page>
    </Row>
    <!--新增编辑-->
    <scheduleForm
      :modalShow="formShow"
      :modalFormTitle="formTitle"
      :parentForm="parentForm"
      @listenModalForm="hideModel"
      @refreshTableList="getTableList"
    ></scheduleForm>
    <!--是否删除框-->
    <Modal v-model="delModal" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>是否继续删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="btnLoading" @click="comfirmDel">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getScheduleList,
  deleteSchedule,
  pauseSchedule,
  resumeSchedule,
  runSchedule
} from "@/api/system";
import scheduleForm from "./scheduleForm.vue";
export default {
  name: "schedule",
  components: {
    scheduleForm
  },
  data() {
    return {
      tableColums: [
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          align: "center",
          title: "bean名称",
          key: "beanName"
        },
        {
          align: "center",
          title: "方法名称",
          key: "methodName"
        },
        {
          align: "center",
          title: "参数",
          key: "params"
        },
        {
          align: "center",
          title: "cron表达式",
          key: "cronExpression"
        },
        {
          align: "center",
          title: "备注",
          key: "remark"
        },
        {
          align: "center",
          title: "状态",
          key: "status",
          render: (h, params) => {
            const row = params.row;
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: row.status == 0? "success" : "error"
                }
              },
              row.status == 0 ? "正常" : "暂停"
            );
          }
        },
        {
          align: "center",
          title: "创建时间",
          key: "createTime"
        },
        {
          title: "操作",
          align: "center",
          minWidth: 80,
          render: (h, params) => {
            let actions = [];

            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  directives: [
                    {
                      name: "perms",
                      value: "sys:schedule:update"
                    }
                  ],
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.editSchedule(params.row);
                    }
                  }
                },
                "修改"
              )
            );

            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  directives: [
                    {
                      name: "perms",
                      value: "sys:schedule:delete"
                    }
                  ],
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.delSchedule(params.row.jobId);
                    }
                  }
                },
                "删除"
              )
            );

            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "volcano",
                    size: "small"
                  },
                  directives: [
                    {
                      name: "perms",
                      value: "sys:schedule:pause"
                    }
                  ],
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.pause(params.row.jobId);
                    }
                  }
                },
                "暂停"
              )
            );
            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small"
                  },
                  directives: [
                    {
                      name: "perms",
                      value: "sys:schedule:resume"
                    }
                  ],
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.resume(params.row.jobId);
                    }
                  }
                },
                "恢复"
              )
            );
            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  directives: [
                    {
                      name: "perms",
                      value: "sys:schedule:run"
                    }
                  ],
                  on: {
                    click: () => {
                      this.run(params.row.jobId);
                    }
                  }
                },
                "运行"
              )
            );

            return h("div", actions);
          }
        }
      ],
      tableData: [],
      tableLoading: false,
      total: 0,
      currentPage: 1,
      currentPageSize: 10,
      pageSize: 10,
      formShow: false,
      formTitle: "添加用户",
      parentForm: {},
      delModal: false,
      delId: "", //删除的Id
      btnLoading: false,
      searchForm: {
        beanName: ""
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getTableList();
  },
  methods: {
    resetSearch() {
      this.searchForm.beanName = "";
    },
    doSearchTableList() {
      this.currentPage = 1;
      this.getTableList();
    },
    async getTableList() {
      this.tableLoading = true;
      const params = {
        limit: this.currentPageSize,
        page: this.currentPage,
        beanName: this.searchForm.beanName
      };
      const result = await getScheduleList(params);
      if (result.code == 0) {
        let res = result.data;
        this.total = res.totalCount;
        this.tableData = res.list;
      }
      this.tableLoading = false;
    },
    changeCurrentPage(num) {
      this.currentPage = num;
      this.getTableList();
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize;
      this.getTableList();
    },
    addSchedule() {
      Object.keys(this.parentForm).forEach(key => (this.parentForm[key] = ""));
      this.formTitle = "新增定时任务";
      this.formShow = true;
    },
    editSchedule(row) {
      this.parentForm = JSON.parse(JSON.stringify(row));
      this.formTitle = "修改定时任务";
      this.formShow = true;
    },
    delSchedule(Id) {
      this.delId = Id;
      this.delModal = true;
    },
    async comfirmDel() {
      this.btnLoading = true;
      try {
        const res = await deleteSchedule([this.delId]);
        if (res.code == "0") {
          this.$Message.success("删除成功!");
          this.getTableList();
          this.delModal = false;
        } else {
          this.$Message.error(res.msg);
        }
      } catch (err) {
        console.log(err);
        this.$Message.error("服务器异常，稍后再试");
      }
      this.btnLoading = false;
    },
    pause(Id) {
      console.log(Id);
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要暂停此任务？</p>",
        onOk: () => {
          this.comfirmPause(Id);
        },
        onCancel: () => {}
      });
    },
    async comfirmPause(id) {
      this.btnLoading = true;
      try {
        const res = await pauseSchedule([id]);
        if (res.code == "0") {
          this.$Message.success("暂停成功!");
        } else {
          this.$Message.error(res.msg);
        }
      } catch (err) {
        console.log(err);
        this.$Message.error("服务器异常，稍后再试");
      }
      this.btnLoading = false;
    },
    resume(Id) {
      console.log(Id);
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要恢复此任务？</p>",
        onOk: () => {
          this.comfirmResume(Id);
        },
        onCancel: () => {}
      });
    },
    async comfirmResume(id) {
      this.btnLoading = true;
      try {
        const res = await resumeSchedule([id]);
        if (res.code == "0") {
          this.$Message.success("恢复成功!");
        } else {
          this.$Message.error(res.msg);
        }
      } catch (err) {
        console.log(err);
        this.$Message.error("服务器异常，稍后再试");
      }
      this.btnLoading = false;
    },
    run(Id) {
      console.log(Id);
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要运行此任务？</p>",
        onOk: () => {
          this.comfirmRun(Id);
        },
        onCancel: () => {}
      });
    },
    async comfirmRun(id) {
      this.btnLoading = true;
      try {
        const res = await runSchedule([id]);
        if (res.code == "0") {
          this.$Message.success("运行成功!");
        } else {
          this.$Message.error(res.msg);
        }
      } catch (err) {
        console.log(err);
        this.$Message.error("服务器异常，稍后再试");
      }
      this.btnLoading = false;
    },
    hideModel() {
      this.formShow = false;
    }
  }
};
</script>
